<template>
	<div class="zuzhiguanli flex">
    <left2></left2>

    <div class="flex animate__animated animate__fadeIn" >
      <div style="width: 380px; height: 100vh; padding: 20px; background: #FFFFFF; overflow: auto; position: relative;">
        <el-tree  class="filter-tree" @node-click="handleNodeClick" @node-contextmenu="openMenu" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>

        <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
          <div class="li" @click="logshow" v-if="youjiandangqian.type == 1">添加报告</div>
        </div>
      </div>

      <div class="youbian" style="padding: 30px 0; width: calc(100vw - 620px);">
        <div style="padding:0 30px;">
            <div style="padding: 20px; font-weight: bold;">通用门限</div>
            <div class="flexc">
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>设置不限制</div>
                <div style="margin-left: 30px;">
                  <el-radio v-model="all.noLimit" :label="true">是</el-radio>
                  <el-radio v-model="all.noLimit" :label="false">否</el-radio>
                </div>
              </div>
            </div>
            <div class="flexc">
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限1</div>
                <div><el-input v-model="all.limit1" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all.noLimit" placeholder="请输入门限1"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限2</div>
                <div><el-input v-model="all.limit2" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all.noLimit" placeholder="请输入门限2"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限3</div>
                <div><el-input v-model="all.limit3" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all.noLimit" placeholder="请输入门限3"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限4</div>
                <div><el-input v-model="all.limit4" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all.noLimit" placeholder="请输入门限4"></el-input></div>
              </div>

            </div>

            <div style="padding-left: 120px; padding-bottom: 30px;"><el-button type="primary"  @click="baocun()">保存通用门限</el-button></div>
        </div>

        <div style="padding:0 30px;" v-if="all2.dianId">

            <div style="padding: 20px; font-weight: bold;">特殊门限</div>
            <div class="flexc">
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">设置不限制</div>
                <div style="margin-left: 30px;">
                  <el-radio v-model="all2.noLimit" :label="true">是</el-radio>
                  <el-radio v-model="all2.noLimit" :label="false">否</el-radio>
                </div>
              </div>
            </div>
            <div class="flexc">
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限1</div>
                <div><el-input v-model="all2.limit1" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all2.noLimit" placeholder="请输入门限1"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限2</div>
                <div><el-input v-model="all2.limit2" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all2.noLimit" placeholder="请输入门限2"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限3</div>
                <div><el-input v-model="all2.limit3" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all2.noLimit" placeholder="请输入门限3"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div style="width: 200px; text-align: right;">门限4</div>
                <div><el-input v-model="all2.limit4" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 200px; margin-left: 30px;" :disabled="all2.noLimit" placeholder="请输入门限4"></el-input></div>
              </div>

            </div>
            <div style="padding-left: 120px; padding-bottom: 30px;"><el-button type="primary"  @click="baocun2()">保存特殊门限</el-button></div>
        </div>
      </div>

    </div>
	</div>
</template>

<script>
  import { gettreecedian } from '@/api/xitong'
  import { getlimit,updatelimit,getsenior,updatesenior } from '@/api/menxian'
  // import { getxiala } from '@/api/zidian'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'zuzhiguanli',
    components:{
      left2
    },
		data() {
			return {
        all:{
          "noLimit": true,
          "limit1": "",
          "limit2": "",
          "limit3": "",
          "limit4": ""
        },
        all2:{
          "dianId": "",
          "general": true,
          "noLimit": true,
          "limit1": "",
          "limit2": "",
          "limit3": "",
          "limit4": ""
        },
        list:[],
        search:"",


        defaultProps: {
          children: 'children',
          label: 'label'
        },
        data:[],
        menuVisible: false,
        menuPosition: { x: 0, y: 0 },
        youjiandangqian:"",
        zhankaiarray:[]
			}
		},
		created() {
      this.getlist()
      this.getshebi()
		},
		mounted() {

		},
		methods: {

      //新建修改确定
      baocun:function(){
        updatelimit(this.all).then((response)=>{
          this.$message.success('保存成功');

          this.getlist()
        })
      },

      baocun2:function(){
        updatesenior(this.all2).then((response)=>{
          this.$message.success('保存成功');

          this.getlist2()
        })
      },

      //获取
      getlist:function(){
        getlimit().then((response)=>{
          this.all = response.data

        })
      },

      //获取
      getlist2:function(){
        getsenior(this.search).then((response)=>{
          this.all2 = response.data
        })
      },

      //打开右键弹框
      openMenu(event, data, node, element) {
        console.log(data)
        //右键临时赋值
        this.youjiandangqian = data
        this.menuPosition.x = event.clientX;
        this.menuPosition.y = event.clientY;
        this.menuVisible = true;
        event.preventDefault();

        document.addEventListener('click', this.closeMenu);
      },
      //关闭
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      //获取树 下面树相关点击方法
      getshebi:function(){
        gettreecedian().then(response => {
          this.data = response.data
        })
      },
      handleCommand:function(val){
        this.youjiandangqian = ''
      },
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },
      handleNodeClick(data) {
        if(data.level != 2){
          this.all2 = {
            "dianId": "",
            "general": true,
            "noLimit": true,
            "limit1": "",
            "limit2": "",
            "limit3": "",
            "limit4": ""
          }
        }
        if(data.type == 21 || data.type == 22 || data.type == 23){
          this.search = data.value
          this.getlist2()
        }
      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
		}
	}
</script>


<style scoped >
  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }
</style>
